<template>
  <div>
    <h2 style="text-align: center;">管理员查看借款列表</h2>
    <table>
      <tr>
        <td>借款名称<input type="text" v-model="chaxun.xname">
          利息
          <select v-model="chaxun.lixi">
            <option value="">请选择</option>
            <option value="1%">1%</option>
             <option value="3%">3%</option>
             <option value="5%">5%</option>
             <option value="7%">7%</option>
          </select>
            <input type="button" value="查询" @click="xian1()">
        </td>
      </tr>
    </table>
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>借款ID</td>
          <td>用户借款ID</td>
          <td>借款名称</td>
          <td>借款最高金额</td>
          <td>借款年限</td>
          <td>利息</td>
          <td>借款简介</td>
          <td>借款发布时间</td>
        </tr>
      </thead>
      <tbody v-for="em in info" :key="em.xid">
        <tr>
          <td>{{ em.xid }}</td>
          <td>{{ em.zname }}</td>
          <td>{{ em.xname }}</td>
          <td>{{ em.maxprice }}</td>
          <td>{{ em.maxyear }}</td>
          <td>{{ em.lixi }}</td>
          <td>{{ em.xshow }}</td>
          <td>{{ em.xdate.substring(0,10) }}</td>

        </tr>
      </tbody>
    </table>
    一共<span>{{ chaxun.totalcount }}</span>条数据
    一共<span>{{ chaxun.pagecount }}</span>页
    当前第<span>{{ chaxun.pageindex }}</span>页
    每页显示<span>{{ chaxun.pagesize }}</span>条
      <a href="#" @click="page(1)">首页</a>
      <a href="#" @click="page(chaxun.pageindex-1)">上一页</a>
      <a href="#" @click="page(chaxun.pageindex+1)">下一页</a>
      <a href="#" @click="page(chaxun.pagecount)">尾页</a>
      <select v-model="chaxun.pagesize" @change="dd">
    <option value="3">3条/页</option>
    <option value="4">4条/页</option>
    <option value="5">5条/页</option>
    <option value="6">6条/页</option>
  </select>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
let router=useRouter();
const info=ref([{
  xid:0,
  zname:"",
  xname:"",
  maxprice:"",
  maxyear:"",
  lixi:"",
  xshow:"",
  xdate:"",
}])
const chaxun=ref({
  xname:"",
  lixi:"",
  pageindex:1,
  pagesize:2,
  pagecount:0,
  totalcount:0,
})
//分页
const page=(i:any)=>{
  if(i>=1&&i<=chaxun.value.pagecount)
  {
    chaxun.value.pageindex=chaxun.value.pageindex;
    chaxun.value.pageindex=i;
    xian();
  }

}
const dd=()=>{
  chaxun.value.pageindex=1;
  xian();
}
//生命周期
onMounted(()=>{
  xian();
})
//查询
const xian1=()=>{
  xian();
}

//显示函数
const xian=()=>{
  axios({
    url:"http://localhost:8322/api/User/Adminshow",
    method:"get",
    params:info.value
  }).then((res)=>{
    info.value=res.data.b;
    chaxun.value.pagecount=res.data.pagecount;
    chaxun.value.totalcount=res.data.totalcount;
    console.log(res.data);

  }).catch((err)=>{
    console.log(err);
  })
}


//还款
const huankuan=(xid:any)=>{

  router.push({
    name:"HuankuanView",
    params:{
      xid:xid,
    }

  })
}


</script>

<style scoped>

</style>